import React from 'react';
import {WeaSearchGroup, WeaFormItem, WeaInput, WeaBrowser, WeaDatePicker} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EType from './base/EType';
import ETitle from './base/ETitle';
import EShowNum from './base/EShowNum';
import ELinkMode from './base/ELinkMode';
//import EField from './base/EField';
import EField_New from './base/EField_New'

// 知识订阅
export default class Content_34 extends React.Component {
    state = {
        eSubscribeDocCatalogIds: this.props.eSubscribeDocCatalogIds,
        eSubscribeDocCatalog: this.props.eSubscribeDocCatalog,
        eSubscribeTheme: this.props.eSubscribeTheme,
        eSubscribeStartDate: this.props.eSubscribeStartDate,
        eSubscribeEndDate: this.props.eSubscribeEndDate,
        eFieldNewDataSource: this.props.eFieldNewDataSource,
        eFieldNewUsedKeys: this.props.eFieldNewUsedKeys,
        eFieldNewVisible: false,
    };

    render() {
        const {eSubscribeDocCatalog, eSubscribeTheme, eSubscribeStartDate, eSubscribeEndDate, eFieldNewDataSource, eFieldNewUsedKeys, eFieldNewVisible} = this.state;

        let ESubscribeDocCatalog = <div></div>;
        let ESubscribeTheme = <div></div>;
        let ESubscribeStartDate = <div></div>;
        let ESubscribeEndDate = <div></div>;
        if (this.props.eShareLevel == '2') {
            ESubscribeDocCatalog = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@88kss0`} label={getLabel(16398, '文档目录')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@potx5z`}
                        type={'doccategory'}
                        isMultCheckbox={true}
                        isSingle={false}
                        replaceDatas={eSubscribeDocCatalog || []}
                        onChange={(ids, names, datas) => this.setState({eSubscribeDocCatalogIds: ids, eSubscribeDocCatalog: datas})}
                    />
                </WeaFormItem>
            );
            ESubscribeTheme = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@s0s80y`} label={getLabel(24611, '订阅主题')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@18o7pv`} value={eSubscribeTheme} onChange={value => this.setState({eSubscribeTheme: value})}/>
                </WeaFormItem>
            );
            ESubscribeStartDate = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@e8b00t`} label={getLabel(24609, '订阅起始日期')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@j0068r`} value={eSubscribeStartDate} onChange={value => this.setState({eSubscribeStartDate: value})}/>
                </WeaFormItem>
            );
            ESubscribeEndDate = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@dbj6pa`} label={getLabel(24610, '订阅最终日期')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@b1enld`} value={eSubscribeEndDate} onChange={value => this.setState({eSubscribeEndDate: value})}/>
                </WeaFormItem>
            );
        }

        let EFieldNewshow = <div></div>;
        let EFieldNew = <div></div>;
        if (eFieldNewVisible) {
            const eFieldNewProps = {
                eFieldNewDataSource: _.cloneDeep(eFieldNewDataSource),
                eFieldNewUsedKeys: _.cloneDeep(eFieldNewUsedKeys),
                onOk: (data) => {
                    this.setState({
                        eFieldNewDataSource: _.cloneDeep(data.eFieldNewDataSource),
                        eFieldNewUsedKeys: _.cloneDeep(data.eFieldNewUsedKeys),
                        eFieldNewVisible: false
                    });
                },
                onCancel: () => {
                    this.setState({
                        eFieldNewVisible: false
                    });
                }
            };
            EFieldNewshow = (
                <EField_New ecId={`${this && this.props && this.props.ecId || ''}_EField_New@ojs8ir`} {...eFieldNewProps}/>
            );
        }
        const eFieldNewUsedNames = [];
        for (let i = 0; i < eFieldNewUsedKeys.length; i++) {
            for (let j = 0 ; j < eFieldNewDataSource.length; j++) {
                if (eFieldNewUsedKeys[i] == eFieldNewDataSource[j].key) {
                    eFieldNewUsedNames.push(eFieldNewDataSource[j].name);
                }
            }
        }
        
        EFieldNew = this.props.eShareLevel == '2' ? (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@49sd7k`} label={getLabel(19495, '显示字段')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                {EFieldNewshow}
                <div style={{height: '30px', lineHeight: '23px'}}>
                    <i className="icon-coms-Flow-setting portal-esetting-btn" onClick={() => this.setState({eFieldNewVisible: true})}/>
                    <span>{eFieldNewUsedNames.join('，')}</span>
                </div>
            </WeaFormItem>
        ) : '';

        return (
            <div>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@335ajd`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true}>
                    <EType ecId={`${this && this.props && this.props.ecId || ''}_EType@r5daae`} ref="eType" value={this.props.eBaseName}/>
                    {this.props.eShareLevel == '2' ? <ETitle ecId={`${this && this.props && this.props.ecId || ''}_ETitle@5wzvn0`} ref="eTitle" eid={this.props.eid} value={this.props.eTitle}  {...this.props}/> : ''}
                    <EShowNum ecId={`${this && this.props && this.props.ecId || ''}_EShowNum@jlmdsq`} ref="eShowNum" value={this.props.eShowNum}/>
                    <ELinkMode ecId={`${this && this.props && this.props.ecId || ''}_ELinkMode@m0e3er`} ref="eLinkMode" options={this.props.eLinkMode.options} value={this.props.eLinkMode.selected}/>
                    {/*<EField ref="eField" value={this.props.eField}/>*/}
                    {EFieldNew}
                    {ESubscribeDocCatalog}
                    {ESubscribeTheme}
                    {ESubscribeStartDate}
                    {ESubscribeEndDate}
                </WeaSearchGroup>
            </div>
        );
    }

    getSaveValues() {
        return {
            eContentTitle: this.refs['eTitle'] ? this.refs['eTitle'].getSaveValues() : this.props.eTitle,
            eContentShowNum: this.refs['eShowNum'].getSaveValues(),
            eContentLinkMode: this.refs['eLinkMode'].getSaveValues(),
            eContentFieldNewUsedKeys: this.state.eFieldNewUsedKeys,
            eContentSubscribeDocCatalog: this.state.eSubscribeDocCatalogIds,
            eContentSubscribeTheme: this.state.eSubscribeTheme,
            eContentSubscribeStartDate: this.state.eSubscribeStartDate,
            eContentSubscribeEndDate: this.state.eSubscribeEndDate,
        };
    }
}